<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>麦克风SDK UE5集成示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      line-height: 1.6;
    }
    
    h1 {
      color: #333;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
    }
    
    .container {
      margin-top: 20px;
    }
    
    .section {
      margin-bottom: 30px;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #f9f9f9;
    }
    
    .section h2 {
      margin-top: 0;
      font-size: 1.2em;
      color: #444;
    }
    
    button {
      padding: 8px 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    
    button:hover {
      background-color: #45a049;
    }
    
    button.active {
      background-color: #f44336;
    }
    
    .audio-level {
      height: 20px;
      background-color: #eee;
      border-radius: 3px;
      margin-top: 10px;
      overflow: hidden;
    }
    
    .audio-level-bar {
      height: 100%;
      width: 0%;
      background-color: #4CAF50;
      transition: width 0.1s ease-out;
    }
    
    .status {
      margin-top: 10px;
      padding: 10px;
      background-color: #f5f5f5;
      border-radius: 3px;
    }
    
    .indicator {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 5px;
      background-color: #ccc;
    }
    
    .indicator.active {
      background-color: #4CAF50;
    }
    
    .code-example {
      background-color: #f5f5f5;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto;
      font-family: monospace;
      margin-top: 10px;
    }
    
    .log-container {
      height: 150px;
      overflow-y: auto;
      background-color: #f5f5f5;
      padding: 10px;
      border-radius: 3px;
      font-family: monospace;
      font-size: 0.9em;
    }
  </style>
</head>
<body>
  <h1>麦克风SDK UE5集成示例</h1>
  
  <div class="container">
    <div class="section">
      <h2>UE5桥接演示</h2>
      <p>此页面模拟UE5环境，展示麦克风SDK的UE5桥接功能。在实际UE5项目中，您将通过Web UI组件加载此页面。</p>
      
      <div>
        <button id="start-btn">开始麦克风</button>
        <button id="stop-btn">停止麦克风</button>
        <button id="set-gain-btn">设置增益(1.5)</button>
      </div>
      
      <div class="audio-level">
        <div id="level-bar" class="audio-level-bar"></div>
      </div>
      
      <div class="status">
        <div>
          <span class="indicator" id="listening-indicator"></span>
          <span id="listening-status">麦克风未启动</span>
        </div>
      </div>
      
      <div class="log-container" id="log-container"></div>
    </div>
    
    <div class="section">
      <h2>UE5集成代码示例</h2>
      <div class="code-example">
        <pre>
// 在UE5蓝图中调用JavaScript
ExecuteJavaScript("UE5MicrophoneControl.startMicrophone()");
ExecuteJavaScript("UE5MicrophoneControl.stopMicrophone()");
ExecuteJavaScript("UE5MicrophoneControl.setGain(1.5)");

// 获取麦克风状态
ExecuteJavaScript(`
  const status = UE5MicrophoneControl.getMicrophoneStatus();
  ue.BP_MicrophoneController.UpdateStatus(
    status.isOn, 
    status.level,
    status.hasPermission
  );
`);

// 在JavaScript中调用UE5函数
// 这些回调会自动设置，无需手动调用
// ue.BP_MicrophoneController.OnMicrophoneStatusChanged({isOn, hasPermission});
// ue.BP_MicrophoneController.OnAudioLevelChanged({level});
// ue.BP_MicrophoneController.OnMicrophoneError({type, message});
        </pre>
      </div>
    </div>
  </div>
  
  <script type="module">
    // 导入UE5桥接模块
    import { UE5MicrophoneInterface } from '../ue5/bridge.js';
    
    // 模拟UE5环境
    window.ue = {
      interface: {
        OnMicrophoneStatusChanged: function(data) {
          const status = JSON.parse(data);
          log(`状态变化: 麦克风${status.isOn ? '开启' : '关闭'}, 权限${status.hasPermission ? '已授权' : '未授权'}`);
          updateStatus(status.isOn);
        },
        OnAudioLevelChanged: function(data) {
          const { level } = JSON.parse(data);
          document.getElementById('level-bar').style.width = `${level * 100}%`;
        },
        OnMicrophoneError: function(data) {
          const error = JSON.parse(data);
          log(`错误: ${error.type} - ${error.message}`);
        }
      }
    };
    
    // 设置调试模式
    UE5MicrophoneInterface.setDebugMode(true);
    
    // 按钮事件处理
    document.getElementById('start-btn').addEventListener('click', async () => {
      const result = await UE5MicrophoneInterface.startMicrophone();
      log(`开始麦克风: ${result ? '成功' : '失败'}`);
    });
    
    document.getElementById('stop-btn').addEventListener('click', async () => {
      const result = await UE5MicrophoneInterface.stopMicrophone();
      log(`停止麦克风: ${result ? '成功' : '失败'}`);
    });
    
    document.getElementById('set-gain-btn').addEventListener('click', () => {
      UE5MicrophoneInterface.setGain(1.5);
      log('设置增益: 1.5');
    });
    
    // 更新状态UI
    function updateStatus(isOn) {
      const indicator = document.getElementById('listening-indicator');
      const status = document.getElementById('listening-status');
      
      if (isOn) {
        indicator.classList.add('active');
        status.textContent = '麦克风已启动';
      } else {
        indicator.classList.remove('active');
        status.textContent = '麦克风未启动';
      }
    }
    
    // 日志函数
    function log(message) {
      const logContainer = document.getElementById('log-container');
      const logEntry = document.createElement('div');
      logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
      logContainer.appendChild(logEntry);
      logContainer.scrollTop = logContainer.scrollHeight;
    }
    
    // 初始化日志
    log('UE5集成示例已加载');
    log('点击"开始麦克风"按钮开始测试');
  </script>
</body>
</html> 